<!-- 网络配置 -->
<template>
  <div class="dashboard-editor-container">
    <el-row style="background: #fff; padding: 16px 16px 0">
      <div style="display: flex; justify-content: space-between">
        <div>
          <div class="btn topSubmitBtn" style="width: 100%">
            <el-button type="primary" @click="submit()">保存设置</el-button>
          </div>
          <el-col :xs="24" :sm="24" :lg="24">
            <div class="parameType">
              <div class="title">有线网络接口参数配置</div>
              <!-- <i class="el-icon-s-platform"></i> -->
              <el-form label-width="300px">
                <el-row>
                  <el-col :xs="24" :sm="24" :lg="9">
                    <el-form-item label="设备地址：">
                      <!-- <ipinput></ipinput> -->
                      <el-input v-model="networkForm.eth0_ip"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="24" :lg="5">
                    <el-form-item label-width="100px" label="掩码位数：">
                      <el-input v-model.number="networkForm.eth0_mask"
                        ><span slot="append">默认24位</span></el-input
                      >
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="24" :lg="14">
                    <el-form-item label="网关地址：">
                      <!-- <ipinput></ipinput> -->
                      <el-input v-model="networkForm.gateway"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="24" :lg="14">
                    <el-form-item label="主DNS:">
                      <!-- <ipinput></ipinput> -->
                      <el-input v-model="networkForm.dns_first"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :xs="24" :sm="24" :lg="14">
                    <el-form-item label="从DNS:">
                      <!-- <ipinput></ipinput> -->
                      <el-input v-model="networkForm.dns_second"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="24" :lg="4" class="r-button">
                    <el-button @click="CheckInternetByEth0()"
                      >连通检测</el-button
                    >
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="24">
            <div class="parameType">
              <div class="title">无线网络接口参数配置</div>
              <el-form label-width="300px">
                <el-row>
                  <el-col :xs="24" :sm="24" :lg="14">
                    <el-form-item label="无线接口：">
                      <el-radio v-model="networkForm.is_wifi" label="1"
                        >启用</el-radio
                      >
                      <el-radio v-model="networkForm.is_wifi" label="0"
                        >禁用</el-radio
                      >
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :xs="24" :sm="24" :lg="14">
                    <el-form-item label="无线路由器选择：">
                      <!-- <el-autocomplete
                    style="width:100%"
                    v-model="networkForm.SSID"
                    :fetch-suggestions="querySearchAsync"
                    @select="handleSelect()"
                  ></el-autocomplete> -->
                      <el-select
                        filterable
                        v-model="networkForm.SSID"
                        clearable
                        style="width: 100%"
                        :disabled="networkForm.is_wifi === '0'"
                      >
                        <el-option
                          v-for="(item, index) in SsidList"
                          :key="index"
                          :label="item"
                          :value="item"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="24" :lg="6" class="r-button">
                    <el-button
                      @click="SearchWIFIAp()"
                      :disabled="networkForm.is_wifi === '0'"
                      >搜索无线</el-button
                    >
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :xs="24" :sm="24" :lg="14">
                    <el-form-item label="接入密码：">
                      <el-input
                        v-model="networkForm.Pwd"
                        :disabled="networkForm.is_wifi === '0'"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="24" :lg="14">
                    <el-form-item label="认证方式：">
                      <el-select
                        :disabled="networkForm.is_wifi === '0'"
                        v-model="networkForm.AuthType"
                        style="width: 100%"
                      >
                        <el-option label="WPA-PAK" value="WPA-PAK"></el-option>
                        <el-option label="other" value="other"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :xs="24" :sm="24" :lg="9">
                    <el-form-item label="指定无线接口地址:">
                      <!-- <ipinput /> -->
                      <el-input
                        v-model="networkForm.wifi_ip"
                        :disabled="networkForm.is_wifi === '0'"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <!-- <el-col :xs="24" :sm="24" :lg="4" class="r-button">
                    <el-form-item label="掩码:" label-width="50px">
                      <el-input v-model="networkForm.wifi_mask" :disabled="networkForm.is_wifi === '0'"></el-input>
                    </el-form-item>
                  </el-col> -->
                  <el-col :xs="24" :sm="24" :lg="8">
                    <el-form-item label="掩码位数：" label-width="120px">
                      <el-input style="width:220px" v-model.number="networkForm.wifi_mask" :disabled="networkForm.is_wifi === '0'"
                        ><span slot="append">默认24位</span></el-input
                      >
                      <el-button style="margin-left:20px"
                        @click="CheckInternetByWifi()"
                        :disabled="networkForm.is_wifi === '0'"
                        >连通检测</el-button
                      >
                    </el-form-item>
                  </el-col>
                  <!-- <el-col :xs="24" :sm="24" :lg="4" class="r-button">
                    <el-button @click="CheckInternetByWifi()" :disabled="networkForm.is_wifi === '0'"
                      >连通检测</el-button
                    >
                  </el-col> -->
                </el-row>
                <!-- <el-row>
                  <el-col :xs="24" :sm="24" :lg="14">
                    <br />
                  </el-col>
                  <el-col :xs="24" :sm="24" :lg="4" class="r-button">
                    
                  </el-col>
                </el-row> -->
              </el-form>
            </div>
          </el-col>
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
import { connrequest } from "@/api/firstPage";
import ipinput from "./components/ipinput";
export default {
  components: { ipinput },
  data() {
    return {
      networkForm: {},
      SsidList: [],
      state: ""
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.getData();
    // this.SearchWIFIAp()
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods: {
    async getData() {
      const res = await connrequest("GetParamInterface");
      this.networkForm = { ...res.Data, is_wifi: res.Data.is_wifi + "" };
    },
    async submit() {
      var reg =
        /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
      let subWebMask = /^[0-9]*$/;
      if (!reg.test(this.networkForm.eth0_ip)) {
        this.$message.error("请输入正确的设备地址");
      } else if (!subWebMask.test(this.networkForm.eth0_mask)) {
        this.$message.error("请输入正确的掩码位数");
      } else if (
        !reg.test(this.networkForm.gateway) &&
        this.networkForm.gateway !== ""
      ) {
        this.$message.error("请输入正确的网关地址");
      } else if (
        !reg.test(this.networkForm.dns_first) &&
        this.networkForm.dns_first !== ""
      ) {
        this.$message.error("请输入正确的主DNS");
      } else if (
        !reg.test(this.networkForm.dns_second) &&
        this.networkForm.dns_second !== ""
      ) {
        this.$message.error("请输入正确的从DNS");
      }  else if (
        !reg.test(this.networkForm.wifi_ip) &&
        this.networkForm.wifi_ip !== ""
      ) {
        this.$message.error("请输入正确的无线接口地址");
      } else if (this.networkForm.is_wifi == 1 && this.networkForm.Pwd === "") {
        this.$message.error("接入密码不能为空");
      } else if (this.networkForm.is_wifi == 1 && this.networkForm.wifi_ip === "") {
        this.$message.error("无线接口地址不能为空");
      } else if (this.networkForm.is_wifi == 1 && this.networkForm.dns_first === "") {
        this.$message.error("主DNS不能为空");
      } else if (this.networkForm.is_wifi == 1 && this.networkForm.dns_second === "") {
        this.$message.error("从DNS不能为空");
      } else {
        this.networkForm.eth0_mask =
          this.networkForm.eth0_mask === "" ? 24 : this.networkForm.eth0_mask;
        this.networkForm.is_wifi =
          (this.networkForm.is_wifi === "" &&  this.networkForm.is_wifi == 1)? 24 : this.networkForm.is_wifi;
        const data = {
          Data: {
            ...this.networkForm,
            is_wifi: this.networkForm.is_wifi * 1
          }
        };
        const res = await connrequest("SetParamInterface", data);
        if (res.Status.StatusCode === 0) {
          const confirmText = [
            `参数配置保存成功，需要重启设备才能生效。`,
            `您需要立刻重启设备吗？(设备重启将导致数据容灾备份功能短时间失效)`
          ];
          const newDatas = [];
          const h = this.$createElement;
          for (const i in confirmText) {
            newDatas.push(h("p", null, confirmText[i]));
          }
          this.$confirm("提示", {
            message: h("div", null, newDatas),
            confirmButtonText: "重启设备",
            cancelButtonText: "取消",
            type: "warning"
          }).then(async () => {
            const data = {
              Data: {
                Action: "Reboot"
              }
            };
            await connrequest("ExecDeviceMaint", data);
            this.$store.dispatch("user/resetToken").then(() => {
              location.reload();
            });
          });
        }
      }
    },
    async CheckInternetByEth0() {
      const res = await connrequest("CheckInternetByEth0");
      if (res.Status.StatusCode === 0) {
        this.$message.success("有线连通正常");
      }
    },
    async CheckInternetByWifi() {
      const res = await connrequest("CheckInternetByWifi");
      if (res.Status.StatusCode === 0) {
        this.$message.success("无线连通性正常");
      }
    },
    async SearchWIFIAp() {
      const res = await connrequest("SearchWIFIAp");
      let arr = [];
      res.Data.map((item) => {
        arr.push(item);
      });
      this.SsidList = arr;
    },
    querySearchAsync(queryString, cb) {
      var restaurants = this.SsidList;
      var results = queryString
        ? restaurants.filter(this.createStateFilter(queryString))
        : restaurants;
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 3000 * Math.random());
    },
    createStateFilter(queryString) {
      return (state) => {
        return (
          state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    handleSelect(item) {
      console.log(item);
    }
  }
};
</script>
<style lang="scss"scoped>
.parameType {
  width: 100%;
  margin: 10px 0;
}
.el-form {
  margin-top: 30px;
  .r-button {
    margin-left: 30px;
  }
}
::v-deep.el-form-item {
  label {
    font-weight: 500;
  }
}
</style>